<template>
  <div class="h-full overflow-hidden">
    <n-card class="h-full rounded-8px shadow-sm">
      <dev class="h-full dis-flex flex-col">
        <n-form inline label-placement="left">
          <n-form-item label="模板分类" class="w-200">
            <n-select
              v-model:value="observe_data.channel"
              class="w-50"
              placeholder="请选择"
              :options="observe_data.channelList"
            ></n-select>
          </n-form-item>
          <n-form-item>
            <n-button @click="onSearch">搜索</n-button>
          </n-form-item>
          <n-form-item>
            <n-button @click="onReset">重置</n-button>
          </n-form-item>
          <n-form-item>
            <n-button @click="onSearch">新增</n-button>
          </n-form-item>
        </n-form>
        <loading-empty-wrapper class="h-full flex-auto" :loading="loading" :empty="empty">
          <n-data-table :columns="columns" :data="observe_data.articleList" :flex-height="true" class="h-full" />
        </loading-empty-wrapper>
        <n-pagination
          v-model:page="observe_data.page"
          v-model:page-size="observe_data.pageSize"
          :page-count="observe_data.total"
          show-size-picker
          :page-sizes="[10, 20, 30]"
          class="m-5"
        />
      </dev>
    </n-card>
  </div>
</template>

<script setup lang="tsx">
import { onMounted, ref } from 'vue';
import { NButton, NPopconfirm, NSpace } from 'naive-ui';
import type { DataTableColumn } from 'naive-ui';
import { articleGetList, articleDelete } from '@/service';
import { useLoadingEmpty } from '@/hooks';
const { loading, startLoading, endLoading, empty, setEmpty } = useLoadingEmpty();
const observe_data = ref<Article.Management>({
  page: 1,
  pageSize: 10,
  total: 0,
  channel: null,
  status: null,
  channelList: [],
  articleList: [],
  statusList: [
    {
      label: '已发布',
      value: '0'
    },
    {
      label: '草稿',
      value: '1'
    }
  ]
});
// 获取文章列表逻辑
const getArticleList = async () => {
  startLoading();
  const { data } = await articleGetList();
  observe_data.value.articleList = data || [];
  observe_data.value.total = data?.length || 0;
  endLoading();
  setEmpty(data?.length === 0);
};
// 删除文章逻辑
const deleteArticle = async (id: number) => {
  const { data } = await articleDelete(id);
  if (data) {
    getArticleList();
  }
};

const onSearch = () => {
  observe_data.value.page = 1;
  getArticleList();
};

const onReset = () => {
  observe_data.value.page = 1;
  observe_data.value.channel = null;
  observe_data.value.status = null;
};

const columns: DataTableColumn<ApiArticle.Article>[] = [
  {
    title: '标题',
    key: 'title',
    align: 'center'
  },
  {
    title: '分类',
    key: 'cate_name',
    align: 'center'
  },
  {
    title: '发表时间',
    key: 'pub_date',
    align: 'center'
  },
  {
    title: '状态',
    key: 'state',
    align: 'center'
  },
  {
    key: 'action',
    title: '操作',
    align: 'center',
    render: row => {
      return (
        <NSpace justify={'center'}>
          <NButton size={'small'} onClick={() => console.log(row.cate_name)}>
            编辑
          </NButton>
          <NPopconfirm
            onPositiveClick={() => {
              deleteArticle(row.id);
            }}
          >
            {{
              default: () => '确认删除',
              trigger: () => <NButton size={'small'}>删除</NButton>
            }}
          </NPopconfirm>
        </NSpace>
      );
    }
  }
];

onMounted(() => {
  getArticleList();
});
</script>

<style></style>
